// src/views/child1.vue
<template>
  <div class="child-1">
    <p>--child1组件--</p>
    <div>
      <el-button type="primary" @click="sendData">传递数据给父组件</el-button>
      <el-button type="primary" @click="getParentData">使用$parent</el-button>
      <el-button type="primary" @click="setListeners">使用listeners调用父级方法</el-button>
    </div>
    <div>
      <el-input v-model="childStr" @input="confirm" style="width: 200px"></el-input>

      <button type="primary" @click="confirm">修改v-model数据</button>
    </div>
    <div>
      <p>parent组件数据：{{ msg }}</p>
      <!-- 子组件child1-child -->
      <!-- <child1-child v-bind="$attrs" v-on="$listeners"></child1-child> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    },
    // 通过v-model方式传值
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      childStr: 'child String'
    };
  },
  inheritAttrs: false,
  mounted() {
    console.log('child1组件获取$attrs', this.$attrs);
    console.log('child1组件获取$listeners', this.$listeners);
  },
  methods: {
    // 我们在父组件中使用v-model向child2子组件传递数据，子组件的props中使用默认的value属性接收，
    // 在子组件中利用$emit触发父组件中默认input事件，此时传递的数据便会在子组件和父组件中发生变化，这就是数据双向绑定
    // 通过$emit触发父组件的input事件，并将第二个参数作为值传递给父组件
    confirm(event) {
      console.log('@input', event, event.target);
      this.$emit('input', this.childStr);
    },

    // 点击按钮，使用$emit向父组件传递数据
    sendData() {
      this.$emit('childData', '我是子组件向父组件提交的数据');
    },
    // 通过$parent方式获取父组件值
    getParentData() {
      console.log('父组件', this.$parent);
    },
    //如果存在多层级组件，无需使用emit的方式逐级向上触发事件，只需要使用$listerners就可以得到父组件中的自定义事件
    setListeners() {
      this.$listeners.childData('通过listeners调用方法');
    }
  }
};
</script>
<style scoped>
.child-1 {
  border: 1px solid red;
}
</style>
